<template>
    <view class="yellowtodo">
    <view class="yellowlist">
      <view class="big-circle">
        <view class="little-circle"> </view>
      </view>
      <view class="item">
        {{ item }}
      </view>
    </view>
  </view>
</template>
<script>
export default{
    name:"YellowList",
    props:{
        item:String,
    },
    data(){
        return{};
    },
}
</script>

<style scoped>
.yellowtodo{
 display: flex;
 justify-content: center;
 margin-top: 20rpx;
}
.yellowlist {
    display: flex;
    align-items: center;
  width: 680rpx;
  height: 120rpx;
  border-radius: 30rpx;
  background-color: rgb(202, 245, 102);
}
.big-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30rpx;
  margin-right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: gray;
}
.little-circle {
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: white;
}
.item {
  line-height: 120rpx;
 font-family: Smiley Sans;
   color: white;
}
</style>